<template>
  <a-modal
    title="填写材料"
    v-model="visible"
    centered
    :width="950"
    @ok="saveFill"
    @cancel="onCancel"
  >
    <div class="base-info-scroll">
      <a-form-model
        ref="ruleForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="matForm"
      >
        <a-form-model-item label="业务编号">
          <a-input-search v-model="businessNo" block placeholder="填写业务编号" @search="autoWrite">
            <a-button type="primary" slot="enterButton">
              确认自动填写
            </a-button>
          </a-input-search>
        </a-form-model-item>
        <a-divider orientation="left">
          基本信息
        </a-divider>
        <a-form-model-item v-for="(item,index) in baseForm" :key="index" :label="item.label" :rules="{ required: item.required == '1' ? true : false, message: '请填写' + item.label, trigger: item.type === 'text' ? 'blur' : 'change' }">
          <a-input v-if="item.type === 'text'" v-model="item.value" :placeholder="`填写${item.label}`" />
          <a-select v-if="item.type === 'select'" v-model="item.value" :placeholder="`选择${item.label}`">
            <a-select-option v-for="(item,index) in item.items" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-divider orientation="left">填写材料</a-divider>
        <a-form-model-item v-for="(item,index) in matForm" :key="index" :label="item.label" :rules="{ required: item.required == '1' ? true : false, message: '请填写' + item.label, trigger: item.type === 'text' ? 'blur' : 'change' }">
          <a-input v-if="item.type === 'text'" v-model="item.value" :placeholder="`填写${item.label}`" />
          <a-textarea :rows="4" v-if="item.type === 'textarea'" v-model="item.value" :placeholder="`填写${item.label},多条数据请使用【回车】将数据隔开，如：多个专利申请人`"></a-textarea>
          <a-select v-if="item.type === 'select'" v-model="item.value" :placeholder="`选择${item.label}`">
            <a-select-option v-for="(item,index) in item.items" :key="index" :value="index">{{ item }}</a-select-option>
          </a-select>
          <a-radio-group v-model="item.value" v-if="item.type === 'radio'">
            <a-radio v-for="(item,index) in item.items" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
          <a-upload
            v-if="item.type === 'image'"
            accept=".png,.jpg,.jpeg"
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="updURL"
            :headers="headers"
            @change="info => handleChange(info, item.name)"
          >
            <img v-if="item.value" :src="item.value" width="105" />
            <div v-else>
              <div class="ant-upload-text">
                {{ item.label }}
              </div>
            </div>
          </a-upload>
          <a-upload
            v-if="item.type === 'file'"
            accept="*"
            name="file"
            :multiple="true"
            :action="updURL"
            :headers="headers"
            @change="info => handleFile(info, item.name)"
          >
            <a-button> <a-icon type="upload" /> {{ item.label }} </a-button>
          </a-upload>
          <a-upload
            v-if="item.type === 'file-xls'"
            accept=".xls,.xlsx,.csv"
            name="file"
            :multiple="true"
            :action="updURL"
            :headers="headers"
            @change="info => handleFile(info, item.name)"
          >
            <a-button> <a-icon type="upload" /> {{ item.label }} </a-button>
          </a-upload>
        </a-form-model-item>
        <div class="note" v-html="note"></div>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { autoMats, getFill, getInFill } from '@/api/business'

export default {
  props: {
    fromSource: {
      type: String,
      default: ''
    },
    fillKey: {
      type: String,
      default: ''
    },
    noteUrl: {
      type: String,
      default: ''
    }
  },
  name: 'FillModal',
  data () {
    return {
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      updURL: apis.Upload,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      baseForm: {},
      matForm: {},
      note: '',
      businessNo: ''
    }
  },
  created () {
    this.getInfo(this.fillKey)
  },
  methods: {
    handleFile (info, name) {
      const { matForm } = this
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        matForm[name].value = info.file.response.result.url
        matForm[name].filename = info.file.name
      }
    },
    handleChange (info, name) {
      const { matForm } = this
      if (info.file.status === 'uploading') {
        return false
      }
      if (info.file.status === 'done') {
        matForm[name].value = info.file.response.result.url
      }
    },
    getInfo (key) {
      const app = this
      const mForm = {}
      const bForm = {}
      if (this.fromSource === '1') {
        getFill(key).then(res => {
          const result = res.result
          if (res.status === 0) {
            for (const k in result.base_fields) {
              bForm[result.base_fields[k].name] = result.base_fields[k] || ''
            }
            for (const k in result.mat_fields) {
              mForm[result.mat_fields[k].name] = result.mat_fields[k]
            }
            app.baseForm = bForm
            app.note = result.business.note
            app.matForm = mForm
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
            app.onCancel()
          }
        })
      }
      if (this.fromSource === '2') {
        getInFill(key).then(res => {
          const result = res.result
          if (res.status === 0) {
            for (const k in result.base_fields) {
              bForm[result.base_fields[k].name] = result.base_fields[k]
            }
            for (const k in result.mat_fields) {
              mForm[result.mat_fields[k].name] = result.mat_fields[k]
            }
            app.baseForm = bForm
            app.note = result.business.note
            app.matForm = mForm
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
            app.onCancel()
          }
        })
      }
    },
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    saveFill () {
      const app = this
      const form = Object.assign(app.baseForm, app.matForm)
      const _form = {}
      for (const k in form) {
        if (form[k].name2) {
          _form[form[k].name2] = form[k].filename
        }
        _form[form[k].name] = form[k].value
      }
      app.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', _form)
          this.onCancel()
        } else {
          return false
        }
      })
    },
    autoWrite () {
      const app = this
      if (app.businessNo === '') {
        app.$warning({
          title: '必须填写业务编号'
        })
        return false
      }
      autoMats(this.businessNo).then(res => {
        // const app = this
        const { matForm } = this
        if (res.status === 0) {
          const result = res.result
          for (const k in result) {
            for (const j in matForm) {
              if (k === j) {
                matForm[j].value = result[k].value
                matForm[j].filename = result[k].filename
              }
            }
          }
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.note >>> img {
  display: block;
  width: 100%;
}
.base-info-scroll {
  height: 700px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 15px;
}
</style>
